<template>
	<div class="passwork">
		<van-overlay :show="hasShow" @click="$emit('input', false);">
			<div class="wrapper" @click.stop>
				<div class="input_box">
					<div class="title">
						{{$t('trade.paymentPassword')}}
						<van-icon name="cross" @click="$emit('input', false);" />
					</div>
					<el-input v-model="passwork" type="password" :placeholder="$t('trade.pleasePaymentPas')"
						@focus="hasShowKey = !hasShowKey"></el-input>
				</div>
			</div>
		</van-overlay>
		<van-number-keyboard v-model="passwork" :show="hasShowKey" @blur="hasShowKey = false" maxlength="6" @input="onInput"
			@delete="onDelete" />
	</div>
</template>

<script>
	export default {
		props: {
			value: {
				type: Boolean,
				default: false,
			},
		},
		components: {},
		data() {
			return {
				hasShowKey: false,
				passwork: '',
			}
		},
		computed: {
			hasShow: {
				get() {
					this.hasShowKey = true;
					return this.value
				},
				set(val) {
					this.$emit('input', val)
				}
			}
		},
		watch: {
			passwork(val) {
				if (val && val.length == 6) {
					this.$emit('success', val)
				}
			}
		},
		mounted() {},
		methods: {
			onInput(value) {
				// console.log('value', value);
			},
			onDelete() {
				// console.log('删除');
			}
		}
	}
</script>

<style scoped lang="less">
	.wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		padding: 0 35px;

		.input_box {
			position: relative;
			border-radius: 20px;
			background-color: #1A1A1A;
			padding: 20px;
			width: 100%;

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 16px;
				margin-bottom: 30px;
				text-align: left;

				i {
					font-size: 18px;
				}
			}

			::v-deep .el-input__inner {
				background-color: #3D3D3D;
				height: 52px;
				line-height: 52px;
				border: 0;
				border-radius: 16px;
				color: #fff;
				letter-spacing: 4px;
				font-size: 14px;

				&::placeholder {
					color: #999999;
					font-size: 14px;
					letter-spacing: normal;
				}
			}
		}
	}

	.van-number-keyboard {
		background-color: #1A1A1A;

		::v-deep .van-key {
			background-color: #3D3D3D;
		}
	}
</style>